import { CONTACT_US_CONTENT } from "@/constant";
// import { useRouter } from "next/router";

const ContactUs = () => {
    // const router = useRouter();

    const renderContent = (content: any) => {
        if (typeof content === 'string') return content;

        return content.map((item: any, index: number) => {
            if (typeof item === 'string') return item;

            if (item.type === 'link') {
                return (
                    <span
                        key={index}
                        className={`${item.className} cursor-pointer hover:underline`}
                        // onClick={() => router.push(item.href)}
                    >
                        {item.text}
                    </span>
                );
            }

            return null;
        });
    };

    return (
        <div className="max-w-4xl mx-auto py-12 px-4 text-center">
            <h1 className="text-3xl font-bold mb-8">{CONTACT_US_CONTENT.title}</h1>

            {CONTACT_US_CONTENT.sections.map((section, index) => (
                <p key={index} className="text-lg mb-4">
                    {renderContent(section.content)}
                </p>
            ))}

            <div className="mt-8 space-y-2">
                <p className="text-gray-700">Phone Number: {CONTACT_US_CONTENT.contactInfo.phone}</p>
                <p className="text-gray-700">Address: {CONTACT_US_CONTENT.contactInfo.address}</p>
            </div>
        </div>
    );
};

export default ContactUs;